<template>
  <div class="leave">
    <section class="query-form">
      <el-form :inline="true" :model="queryForm" ref="queryForm">
        <el-form-item label="审批状态" prop="state">
          <el-select v-model="queryForm.state">
            <el-option :value="0" label="全部"></el-option>
            <el-option :value="1" label="待审批"></el-option>
            <el-option :value="2" label="审批中"></el-option>
            <el-option :value="3" label="审批拒绝"></el-option>
            <el-option :value="3" label="审批通过"></el-option>
            <el-option :value="3" label="作废"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </section>
    <section class="base-table">
      <section class="action">
        <el-button type="primary" v-has="'user-create'">申请休假</el-button>
      </section>
      <el-table :data="applyList">
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :formatter="column.formatter"
          v-for="column in columns"
          :key="column.prop"
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="mini">查看</el-button>
            <el-button type="danger" size="mini">作废</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
      />
    </section>
  </div>
</template>

<script>
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRaw
} from 'vue'
import utils from '@/utils/utils'
export default {
  name: 'User',
  setup() {
    const globalProperties =
      getCurrentInstance().appContext.config.globalProperties
    const $api = globalProperties.$api

    const queryForm = reactive({
      applyState: ''
    })
    const applyList = ref([])

    onMounted(() => {
      getApplyList()
    })

    const getApplyList = async () => {
      const params = {
        ...queryForm,
        ...pager
      }
      const { list, page } = await $api.getApplyList(params)
      applyList.value = list
      pager.total = page.total
    }

    const action = ref('add')

    const pager = reactive({
      pageNum: 1,
      pageSize: 10,
      total: 0
    })

    const columns = reactive([
      {
        label: '单号',
        prop: 'orderNo'
      },
      {
        label: '休假时间',
        prop: '',
        formatter(row) {
          return (
            utils.formatDate(new Date(row.startTime), 'yyy-MM-dd') +
            '到' +
            utils.formatDate(new Date(row.endTime), 'yyy-MM-dd')
          )
        }
      },
      {
        label: '休假时长',
        prop: 'leaveTime'
      },
      {
        label: '休假类型',
        prop: 'applyType',
        formatter(row, column, value) {
          return {
            1: '事假',
            2: '调休',
            3: '年假'
          }[value]
        }
      },
      {
        label: '休假原因',
        prop: 'reason'
      },
      {
        label: '申请时间',
        prop: 'createTime',
        formatter(row, column, value) {
          return utils.formatDate(new Date(value))
        }
      },
      {
        label: '审批人',
        prop: 'auditUser'
      },
      {
        label: '当前审批人',
        prop: 'curAuditUserName'
      },
      {
        label: '审批状态',
        prop: 'applyState',
        formatter(row, column, value) {
          return {
            1: '待审批',
            2: '审批中',
            3: '审批拒绝',
            4: '审批通过',
            5: '作废'
          }[value]
        }
      }
    ])

    const handleReset = () => {
      queryForm.value.resetFields()
    }

    const handleCurrentChange = () => {}

    return {
      queryForm,
      columns,
      handleCurrentChange,
      pager,
      applyList
    }
  }
}
</script>

<style lang="scss" scoped></style>
